<script lang="ts" setup>
// vue
import { ref, computed } from 'vue'
import { onLoad, onShow, onReady } from '@dcloudio/uni-app'
// icon
import cart from '@/static/icon/cart/cart.svg'
// type
import type {
  CategoryGoodsItem,
  CategoryInfoItem,
  CategoryTopItem,
  goods,
} from '@/types/category'
import type { InputNumberBoxEvent } from '@/components/vk-data-input-number-box/vk-data-input-number-box'
import type {
  SkuPopupEvent,
  SkuPopupInstance,
  SkuPopupLocaldata,
} from '@/components/vk-data-goods-sku-popup/vk-data-goods-sku-popup'
import type { CartItem } from '@/types/cart'
import { ReceiveType } from '@/services/constants'
// api
import { getHomeCategoryTopAPI } from '@/services/category'
import { getGoodsSpecsAPI } from '@/services/goods'
import {
  cartAddAPI,
  cartEditAPI,
  cartGetListAPI,
  cartCleanAPI,
} from '@/services/cart'
import { shopGetBusinessTimeAPI } from '@/services/shop'
// 组件
import cartDialog from './components/cart-dialog.vue'
import iconContainer from '@/components/container/icon-container.vue'
import vkDataInputNumberBox from '@/components/vk-data-input-number-box/vk-data-input-number-box.vue'
import vkDataGoodsSkuPopup from '@/components/vk-data-goods-sku-popup/vk-data-goods-sku-popup.vue'

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()

// 绑定购物车弹窗
const cartDialogRef = ref<InstanceType<typeof cartDialog> | null>(null)

// 接收参数
const query = defineProps<{
  type: number
}>()

// 获取分类列表
const categoryList = ref<CategoryInfoItem[]>([])
const categoryGoodsList = ref<CategoryGoodsItem[]>([])
// 可变的标签
const activeIndex = ref<number>(0)
// 判断是否渲染完成
const isFinish = ref<boolean>(false)
// 购物车选中商品
const cartGoodsList = ref<goods[]>([])
// 营业时间状态
const isBusinessTime = ref<boolean>(false)

// list: 导航栏数据
const list = ref<any[]>([])
// tabCur: 当前tab索引
const tabCur = ref<any>(0)
// mainCur: 当前main索引
const mainCur = ref<any>(0)
// verticalNavTop: 导航栏滚动条位置
const verticalNavTop = ref<any>(0)
// load: 是否加载完成
const load = ref<any>(true)

/**
 * @description 页面加载完成时隐藏loading
 */
onReady(() => {
  uni.hideLoading()
})

/**
 * 判断是否在营业时间内
 */
const checkBusinessTime = async () => {
  // 获取营业时间
  const res = await shopGetBusinessTimeAPI()
  // 判断当前时间是否在营业时间内
  const now = new Date()
  const [startTime, endTime] = res.result.timeRange // 解构获取开始和结束时间

  // 解析开始时间
  const [startHours, startMinutes, startSeconds] = startTime
    .split(':')
    .map(Number)
  // 解析结束时间
  const [endHours, endMinutes, endSeconds] = endTime.split(':').map(Number)

  // 创建今天的开始和结束时间对象
  const start = new Date()
  start.setHours(startHours, startMinutes, startSeconds, 0)

  const end = new Date()
  end.setHours(endHours, endMinutes, endSeconds, 0)

  // 判断当前时间是否在营业时间范围内
  if (now >= start && now <= end) {
    isBusinessTime.value = true
    return
  }
  // 提示, 2秒后关闭
  uni.showToast({
    icon: 'none',
    title: '当前时间不在营业时间范围内',
    duration: 2000,
  })
}

/**
 * 在页面加载完成后，获取数据
 * @param options 页面参数
 */
onLoad(async () => {
  uni.showLoading({
    title: '加载中...',
    mask: true,
  })

  checkBusinessTime()

  // 等待数据加载完成
  await getCategoryTopData()

  let temp: any[] = []
  for (let i = 0; i < categoryList.value.length; i++) {
    const category = categoryList.value[i]
    temp[i] = {}
    temp[i].name = category.name
    temp[i].id = i
  }
  list.value = temp
  mainCur.value = temp[0]

  // 清空购物车列表
  cartGoodsList.value = []
  // 获取购物车列表
  getCartData()

  // 标记渲染完成
  isFinish.value = true
})

/**
 * 在每次页面显示时，获取购物车数据
 */
onShow(async () => {
  // 获取购物车列表
  getCartData()
})

/**
 * @description 点击tab切换, 计算当前tab的位置
 * @param e
 */
const TabSelect = (e: any) => {
  tabCur.value = e.currentTarget.dataset.id
  mainCur.value = e.currentTarget.dataset.id
  verticalNavTop.value = (e.currentTarget.dataset.id - 1) * 50
}

/**
 * @description 监听滚动事件，计算当前tab的位置
 * @param e
 */
const VerticalMain = (e: any) => {
  let scrollTop = e.detail.scrollTop + 10
  if (load.value) {
    for (let i = 0; i < list.value.length; i++) {
      let view = uni.createSelectorQuery()
      view
        .select(`#main-${list.value[i].id}`)
        .fields(
          {
            size: true,
          },
          (data: any) => {
            if (data && data.height !== undefined) {
              list.value[i].top = tabHeight
              tabHeight += data.height
              list.value[i].bottom = tabHeight
            }
          },
        )
        .exec()
    }
    load.value = false
  }

  let tabHeight = 0
  for (let i = 0; i < list.value.length; i++) {
    if (scrollTop > list.value[i].top && scrollTop < list.value[i].bottom) {
      verticalNavTop.value = (list.value[i].id - 1) * 50
      tabCur.value = list.value[i].id
      return false
    }
  }
}

/**
 * 计算 cartGoodsList 总价
 */
const totalPrice = computed(() => {
  let total = 0
  for (let i = 0; i < cartGoodsList.value.length; i++) {
    const goods = cartGoodsList.value[i]
    const goodsPrice = parseFloat(goods.price)
    total += goodsPrice * goods.buyCount
  }
  return total
})

/**
 * 计算 cartGoodsList 总件数
 */
const totalCount = computed(() => {
  let total = 0
  for (let i = 0; i < cartGoodsList.value.length; i++) {
    const goods = cartGoodsList.value[i]
    total += goods.buyCount
  }
  return total
})

/**
 * 获取分类列表数据
 */
const getCategoryTopData = async () => {
  const res = await getHomeCategoryTopAPI(query.type)
  const { categoryGoodsList: goodsList, category } = res.result
  categoryList.value = category
  categoryGoodsList.value = goodsList
}

/**
 * 获取购物车数据
 */
const getCartData = async () => {
  // 清空购物车列表
  cartGoodsList.value = []
  const res = await cartGetListAPI()
  res.result.forEach((item: CartItem) => {
    // 设置购物车数据
    const goods: goods = {
      id: item.id,
      name: item.name,
      price: item.price.toString(),
      buyCount: item.count,
      singleSkuId: item.skuId,
      specType: item.specType,
      stock: item.stock,
      skuText: item.skuText,
    }
    // 添加到购物车列表
    cartGoodsList.value.push(goods)
  })
  // 遍历购物车列表, 设置 categoryList的 gooods 的购买数量
  if (cartGoodsList.value.length > 0) {
    // 遍历全部分类列表, 获取对应商品的购买数量
    for (let i = 0; i < categoryGoodsList.value.length; i++) {
      const goodsList = categoryGoodsList.value[i].goodsList
      for (let j = 0; j < goodsList.length; j++) {
        const goods = goodsList[j]
        // 遍历购物车列表，找到对应商品
        const cartGoods = cartGoodsList.value.find(
          (item) => item.singleSkuId === goods.singleSkuId,
        )
        if (cartGoods) {
          // 设置购买数量
          goods.buyCount = cartGoods.buyCount
        }
      }
    }
  } else {
    for (let i = 0; i < categoryGoodsList.value.length; i++) {
      const goodsList = categoryGoodsList.value[i].goodsList
      for (let j = 0; j < goodsList.length; j++) {
        const goods = goodsList[j]
        goods.buyCount = 0
      }
    }
  }
}

/**
 * 打开购物车
 */
const openCart = () => {
  cartDialogRef.value?.open(cartGoodsList.value)
}

/**
 * 购买数量变化
 */
const onBuyCountChange = async (ev: InputNumberBoxEvent) => {
  // index: skuId, value: 购买数量
  const { index, value } = ev
  // 判断cartGoodsList中是否有该商品
  const newGoods = cartGoodsList.value.find(
    (item) => item.singleSkuId === index,
  )
  // 如果有，则更新数量
  if (newGoods) {
    if (value === 0) {
      // 从cartGoodsList中删除该商品
      const index = cartGoodsList.value.indexOf(newGoods)
      cartGoodsList.value.splice(index, 1)
    } else {
      // 更新数量
      newGoods.buyCount = value
    }
    await cartEditAPI(index, { count: value })
    return
  }
  // 在cartGoodsList中没有该商品，则添加
  let goods = null
  // 遍历分类商品列表，找到对应商品
  for (let i = 0; i < categoryGoodsList.value.length; i++) {
    const goodsList = categoryGoodsList.value[i].goodsList
    const tempGoods = goodsList.find(
      (item: goods) => item.singleSkuId === index,
    )
    if (tempGoods) {
      goods = tempGoods
      break
    }
  }
  // 添加到购物车
  cartGoodsList.value.push(goods!)

  // 发送添加购物车请求
  await cartAddAPI({ skuId: index, count: value })
}

/**
 * 子组件更新购物车列表时触发
 */
const onUpdateCategoryCartList = (event: { skuId: string; count: number }) => {
  // 更新购物车中对应商品的数量, 为0则删除
  const newGoods = cartGoodsList.value.find(
    (item) => item.singleSkuId === event.skuId,
  )
  if (newGoods) {
    if (event.count === newGoods.buyCount) {
      return
    }
    if (event.count === 0) {
      const index = cartGoodsList.value.indexOf(newGoods)
      cartGoodsList.value.splice(index, 1)
    } else {
      newGoods.buyCount = event.count
    }

    // 无规格商品
    if (newGoods.specType === 1) {
      // 遍历 categoryGoodsList, 更新对应商品的购买数量
      for (let i = 0; i < categoryGoodsList.value.length; i++) {
        const category = categoryGoodsList.value[i]
        const goodsList = category.goodsList
        for (let j = 0; j < goodsList.length; j++) {
          const goods = goodsList[j]
          // 判断是否是该商品
          if (goods.singleSkuId === event.skuId) {
            // 更新数量
            goods.buyCount = event.count

            // 发送更新购物车请求
            cartEditAPI(event.skuId.toString(), { count: event.count })
            return
          }
        }
      }
    } else {
      // 多规格商品
      // 发送更新购物车请求
      cartEditAPI(event.skuId.toString(), { count: event.count })
    }
  }
}

/**
 * 选规格时触发
 */
const onSelectSpec = async (goods: goods) => {
  // 获取这个商品的规格信息
  const res = await getGoodsSpecsAPI(goods.id.toString())
  localdata.value = {
    _id: res.result.id,
    name: goods.name,
    goods_thumb: goods.indexImageUrl!,
    spec_list: res.result.specs.map((v) => ({
      name: v.name,
      list: v.values,
    })),
    sku_list: res.result.skus.map((v) => ({
      _id: v.id,
      goods_id: res.result.id,
      goods_name: goods.name,
      image: v.picture,
      price: v.price * 100, // 注意：需要乘以 100
      stock: v.inventory,
      sku_name_arr: v.specs.map((vv) => vv.valueName),
    })),
  }
  // 打开sku弹窗
  openSkuPopup(SkuMode.Cart)
}

// 是否显示SKU组件
const isShowSku = ref(false)
// 商品信息
const localdata = ref({} as SkuPopupLocaldata)
// 设置sku按钮模式
enum SkuMode {
  Both = 1,
  Cart = 2,
  Buy = 3,
}
// sku按钮模式, 绑定到组件上
const mode = ref<SkuMode>(SkuMode.Both)
// 打开sku弹窗
const openSkuPopup = (val: SkuMode) => {
  // 显示sku弹窗
  isShowSku.value = true
  // 设置sku按钮模式
  mode.value = val
}

// 绑定sku弹窗组件的ref
const skuPopRef = ref<SkuPopupInstance>()
// 被选中的值
const selectArrText = computed(() => {
  // 过滤掉空字符串
  return skuPopRef.value?.selectArr?.join(' ').trim() || '请选择商品规格'
})
/**
 * 加入购物车
 */
const onAddCart = async (ev: SkuPopupEvent) => {
  // 判断购物车中是否有该商品
  const newGoods = cartGoodsList.value.find(
    (item) => item.singleSkuId === ev._id,
  )

  if (newGoods) {
    // 更新数量
    newGoods.buyCount += ev.buy_num
    // 发送更新购物车请求
    await cartEditAPI(ev._id, { count: newGoods.buyCount })
  } else {
    // 添加到购物车
    await cartAddAPI({ skuId: ev._id, count: ev.buy_num })
    // 刷新购物车数据
    await getCartData()
  }
  uni.showToast({ title: '添加成功', icon: 'success' })
  // 关闭sku弹窗
  isShowSku.value = false
}

/**
 * 支付按钮点击事件
 */
const onPayClick = () => {
  // 判断是否有选中的商品
  if (cartGoodsList.value.length === 0) {
    uni.showToast({ title: '请选择商品', icon: 'none' })
    return
  }
  // 页面跳转并传递参数
  uni.navigateTo({
    url: `/pagesOrder/create/create?type=${query.type}`,
  })
}

/**
 * 返回上一页
 */
const onGoBack = async () => {
  // 页面返回
  uni.navigateBack()
  // 清空购物车列表
  await cartCleanAPI()
}
</script>

<template>
  <!-- 购物车弹窗 -->
  <cartDialog
    @update:categoryCartList="onUpdateCategoryCartList"
    @pay="onPayClick"
    ref="cartDialogRef"
  />
  <!-- sku弹出框 -->
  <vk-data-goods-sku-popup
    v-model="isShowSku"
    :localdata="localdata"
    :mode="mode"
    ref="skuPopRef"
    add-cart-background-color="#f9e17e"
    addCartColor="#000"
    :actived-style="{
      color: '#444444',
      borderColor: '#f9e17e',
      backgroundColor: '#f9e17e',
    }"
    @add-cart="onAddCart"
  />
  <view class="viewport" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
    <view :style="[{ height: '100rpx', width: '100%' }]">
      <!-- 导航栏 -->
      <view class="navbar animation-slide-top">
        <div
          class="back cuIcon-back"
          hover-class="none"
          @click="onGoBack"
        ></div>
        <view class="title">{{
          query.type.toString() === ReceiveType.PICKUP.toString()
            ? '到店自取'
            : '外卖配送'
        }}</view>
      </view>
      <!-- 搜索框 -->
      <!-- <view
        class="search animation-slide-top"
        :style="[{ animationDelay: '0.5s' }]"
      >
        <view class="input">
          <text class="icon-search">水果蛋糕</text>
        </view>
      </view> -->
    </view>

    <view
      :style="[
        {
          display: 'flex',
          height: `calc(100% - 100rpx - 100rpx - ${safeAreaInsets?.bottom}px  )`,
          width: '100%',
        },
      ]"
    >
      <!-- 左侧导航栏 -->
      <view class="left-nav">
        <scroll-view
          class="VerticalNav nav"
          scroll-y
          scroll-with-animation
          :scroll-top="verticalNavTop"
          style="height: 100%"
        >
          <view
            class="cu-item animation-slide-left"
            :class="index == tabCur ? 'text-grey cur' : 'text-black'"
            v-for="(category, index) in categoryList"
            :style="{
              animationDelay: (index + 1) * 0.1 + 's',
            }"
            :key="index"
            @tap="TabSelect"
            :data-id="index"
          >
            {{ category.name }}
          </view>
        </scroll-view>
      </view>

      <!-- 右侧内容 -->
      <view
        class="main-content"
        :class="{ disable: !isBusinessTime }"
        :style="{ animationDelay: '0.5s' }"
      >
        <scroll-view
          class="VerticalMain"
          scroll-y
          scroll-with-animation
          style="height: 100%"
          :scroll-into-view="'main-' + mainCur"
          @scroll="VerticalMain"
        >
          <view
            class="content animation-slide-right"
            v-for="(categoryGoods, categoryIndex) in categoryGoodsList"
            :style="{ animationDelay: (categoryIndex + 1) * 0.1 + 's' }"
            :key="categoryIndex"
            :id="'main-' + categoryIndex"
          >
            <view class="title-container cu-bar solid-bottom">
              <view
                class="action category-title"
                :class="categoryIndex % 2 === 0 ? 'blue' : 'yellow'"
              >
                <text class="cuIcon-title text-gray"></text>
                <text>
                  {{ categoryGoods.categoryName }}
                </text>
              </view>
            </view>
            <!-- 商品列表 -->
            <view class="goods-list">
              <navigator
                v-for="(goods, index) in categoryGoods.goodsList"
                :key="index"
                class="goods animation-fade shadow"
                :class="categoryIndex % 2 === 0 ? 'bg-blue' : 'bg-yellow'"
                :url="`/pages/goods/goods?id=${goods.id}&type=${query.type}`"
              >
                <image class="image" :src="goods.indexImageUrl"></image>
                <view class="info">
                  <view class="name ellipsis">{{ goods.name }}</view>
                  <view
                    class="price-count"
                    hover-class="none"
                    hover-stop-propagation="false"
                  >
                    <view class="price">
                      <text class="number">¥{{ goods.price }}</text>
                    </view>

                    <!-- 单规格商品, 数量 -->
                    <view class="count" v-if="goods.specType === 1">
                      <vk-data-input-number-box
                        @tap.stop
                        v-model="goods.buyCount"
                        :min="0"
                        :index="goods.singleSkuId"
                        :max="goods.stock"
                        :disabledInput="true"
                        @change="onBuyCountChange"
                      />
                    </view>

                    <!-- 多规格商品, 选规格 -->
                    <view
                      class="selectSpec"
                      @tap.stop
                      v-if="goods.specType === 2"
                    >
                      <!-- <view class="selectSpec" @tap.stop> -->
                      <view class="select" @click="onSelectSpec(goods)">
                        选规格
                      </view>
                    </view>
                  </view>
                </view>
              </navigator>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>

    <view :style="[{ height: '100rpx', width: '100%' }]">
      <view
        class="toolbar animation-slide-bottom"
        :style="  { paddingBottom: safeAreaInsets!.bottom + 'px', animationDelay: '0.1s' } "
      >
        <view class="cart-container" v-if="isBusinessTime">
          <view @click="openCart">
            <iconContainer :icon="cart" size="80rpx"></iconContainer>
          </view>

          <text class="text">合计:</text>
          <text class="amount">¥{{ totalPrice.toFixed(2) }}</text>
          <view class="button-grounp">
            <view class="button payment-button" @click="onPayClick">
              选好了({{ totalCount }} 件)
            </view>
          </view>
        </view>

        <view class="not-business-time-tip" v-else>
          <text class="tip"> 当前为非营业时间， </text>
          <text class="tip"> 请选择营业时间内购买。 </text>
        </view>
      </view>

      <!-- 底部占位空盒子 -->
      <view class="toolbar-height"></view>
    </view>
  </view>
</template>

<style lang="scss">
page {
  height: 100%;
  width: 100%;
}

.viewport {
  height: 100%;
  display: flex;
  flex-direction: column;

  // 导航栏
  .navbar {
    position: relative;
    flex: 1;

    .title {
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16px;
      font-weight: 500;
      color: #000000;
    }

    .back {
      position: absolute;
      height: 40px;
      width: 40px;
      left: 0;
      font-size: 20px;
      color: #000000;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}

/* 搜索框 */
.search {
  padding: 0 30rpx 20rpx;
  background-color: #fff;
  .input {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64rpx;
    padding-left: 26rpx;
    color: #8b8b8b;
    font-size: 28rpx;
    border-radius: 32rpx;
    background-color: #f3f4f4;
  }
}
.icon-search {
  &::before {
    margin-right: 10rpx;
  }
}

/** 垂直布局 */
.VerticalBox {
  display: flex;

  width: 100%;
}

/** 左侧导航栏 **/
.left-nav {
  width: 200rpx;
  .VerticalNav.nav {
    white-space: initial;
  }
  .VerticalNav.nav .cu-item {
    width: 100%;
    text-align: left;
    background-color: #fff;
    margin: 0;
    border: none;
    height: auto;
    position: relative;
  }

  .VerticalNav.nav .cu-item.cur {
    background: linear-gradient(
      90deg,
      rgba(219, 242, 247, 1) 50%,
      rgba(241, 241, 241, 1) 90%
    );
  }

  .VerticalNav.nav .cu-item.cur::after {
    content: '';
    width: 10rpx;
    height: auto;
    border-radius: 20rpx;
    position: absolute;
    background-color: #f9e17e;
    top: 0;
    left: 0;
    bottom: 0;
    margin: auto;
  }
}

/** 右侧内容栏 */
.main-content {
  width: 100%;

  &.disable {
    opacity: 0.8;
    // 取消点击效果
    pointer-events: none;
  }
  .VerticalMain {
    background-color: #f1f1f1;
    flex: 1;

    .content {
      width: 100%;
      // 内边距
      padding: 20rpx;

      .title-container {
        width: 100%;

        .category-title {
          display: flex;
          // 左对齐
          justify-content: flex-start;
          width: 80%;
          // 圆角
          border-radius: 10rpx 10rpx 10rpx 10rpx; // 上 右 左 底
          // 内边距
          padding: 10rpx 20rpx;

          &.blue {
            background: linear-gradient(
              90deg,
              rgba(219, 242, 247, 1) 40%,
              rgba(241, 241, 241, 1) 80%
            );
          }
          &.yellow {
            background: linear-gradient(
              90deg,
              rgba(249, 225, 126, 1) 40%,
              rgba(241, 241, 241, 1) 80%
            );
          }
        }
      }

      .goods-list {
        width: 100%;
        display: flex;
        flex-direction: column;

        /* 商品列表 */
        .goods {
          width: 100%;
          margin: 20rpx 0;
          display: flex;
          position: relative;
          background-color: rgb(255, 255, 255);
          height: 200rpx;
          border-radius: 10rpx;
          align-items: center;

          image {
            width: 190rpx;
            height: 190rpx;
            border-radius: 10rpx;
            // 右外边距
            margin-right: 20rpx;
          }

          /* 商品信息 */
          .info {
            height: 100%;
            width: 60%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            // 内边距
            padding: 15rpx;

            /* 商品名称 */
            .name {
              font-size: 30rpx;
              color: #333;
              line-height: 40rpx;
              // 加粗
              font-weight: 400;
              // 字体间距
              letter-spacing: 2rpx;
            }

            /* 价格和数量 */
            .price-count {
              width: 100%;
              display: flex;
              justify-content: space-between;
              align-items: center;

              .price {
                font-size: 16rpx;
                color: #cf4444;
              }
              .number {
                font-size: 24rpx;
              }

              .selectSpec {
                .select {
                  // 圆角
                  border-radius: 10rpx;
                  // 背景色
                  background-color: rgb(232, 204, 140, 0.7);
                  // 字体大小
                  font-size: 14px;
                  // 字体颜色
                  color: #333;
                  // 内边距
                  padding: 5rpx 15rpx;
                }
              }
            }
          }
        }
      }
    }
  }
}

// 吸底工具栏
.toolbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--window-bottom);
  z-index: 5;

  height: 100rpx;
  padding: 0 20rpx;
  display: flex;
  align-items: center;
  border-top: 1rpx solid #ededed;
  border-bottom: 1rpx solid #ededed;
  background-color: rgb(255, 255, 255);
  box-sizing: content-box;

  .cart-container {
    display: flex;
    align-items: center;
    width: 100%;
  }

  .text {
    margin-right: 8rpx;
    margin-left: 32rpx;
    color: #444;
    font-size: 14px;
  }

  .amount {
    font-size: 20px;
    color: #cf4444;

    .decimal {
      font-size: 12px;
    }

    &::before {
      content: '￥';
      font-size: 12px;
    }
  }

  .button-grounp {
    margin-left: auto;
    display: flex;
    justify-content: space-between;
    text-align: center;
    line-height: 72rpx;
    font-size: 13px;
    color: #444444;
    // 字体粗细
    font-weight: 500;

    .button {
      width: 240rpx;
      margin: 0 10rpx;
      border-radius: 72rpx;
    }

    .payment-button {
      background-color: #f9e17e;

      &.disabled {
        opacity: 0.6;
      }
    }
  }
}

.not-business-time-tip {
  width: 100%;
  // 居中显示
  display: flex;
  // flex-direction: column;
  justify-content: center;
  align-items: center;
  // 背景色
  background-color: #f9e17e;
  padding: 20rpx 0rpx;
  border-radius: 50rpx;
  margin: 0 auto;

  .tip {
    font-size: 30rpx;
  }
}

// 底部占位空盒子
.toolbar-height {
  height: 100rpx;
}
</style>
